<template>
  <view class="user_">
    <ls-skeleton
      :skeleton="skeleton"
      :round="true"
      :loading="loading"
      :animate="true"
    >
      <view>
        <view class="header_wrapper">
			
			<view class="head_title">
				个人中心
			</view>
        
          <view class="header_info_">
            <view class="header_top_" @click="head_login">
              <view class="img_" v-if="userinfo.userHead">
                <image
                  :src="imgUrl+userinfo.userHead"
                ></image>
              </view>
			  <view class="img_" v-if="!userinfo.userHead">
			    <image
			      src="https://img2.baidu.com/it/u=1963855021,587266605&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1687453200&t=6e9885ba4fa8e19869d873eab8222cc1"
			    ></image>
			  </view>
              <view class="header_name">
                <view class="name_" v-if="!islogin">请点击登录!</view>
                <view class="name_" v-if="islogin">
                  <view class="nickname_">{{ userinfo.userName }} </view>
                  <view class="grade_">
                    <!-- <image src="/static/user/4.png"></image> -->
                   <!-- <text>
                      {{
                        userInfoServer.roleId === 1
                          ? "联创"
                          : userInfoServer.roleId === 2
                          ? "合伙人"
                          : userInfoServer.roleId === 3
                          ? "服务商"
                          : userInfoServer.roleId === 4
                          ? "店主"
                          : userInfoServer.roleId === 5
                          ? "普通用户"
                          : ""
                      }}
                    </text> -->
					<view class="outlogin" @click="outlogin">
						退出登录
					</view>
                  </view>
				  
				 
                </view>
                <view class="grade_wrapper" v-if="userInfoServer && token">
                  <view class="id_"> ID:{{ userInfoServer.userId }} </view>
                </view>
              </view>
            </view>
       
          </view>
		  
		 
		  
		  
		  
        </view>
        <view class="content_wrapper">
			
			<view class="content-godinfo">
				<view class="tj-godinfo" @click="goaddpetfun(1,'')">
					<u-icon name="plus-circle" color="#F1BFB4" size="40"></u-icon>
					<text>添加宠物</text>
				</view>
						 <view class="content-godinfo-k" v-for="(item,index) in petIdcardList" :key="index" @click="goaddpetfun(2,item)">
						  	<view class="content-godinfo-k-img">
						  		<image :src="httpUrlFn(item.head)" ></image>
						  	</view>
							<view class="content-godinfo-k-title">
								<view class="dog-name"><text>{{item.name}}</text>  <image src="/static/store/max.png" v-if="item.sex==2"></image> <image v-if="item.sex==1" src="/static/store/store7.png" ></image></view> 
								<text class="dog-lxorold">{{item.type}}</text>
							</view>
						  </view>
						 
						  
						  <view class="dog-leb">
						  	<image src="https://img2.baidu.com/it/u=1963855021,587266605&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1687453200&t=6e9885ba4fa8e19869d873eab8222cc1" ></image>
							<text>免费领取保额500，是打算问答</text>
							<view class="dog-see">
								去查看
							</view>
						  </view>
				
			</view>
          <!--       我的订单   -->
		  <view class="order-wrapper-k">
		  	
		  
          <view class="order-wrapper order-wrapper-order">
            <view class="order-bd">
              <block v-for="(item, index) in orderMenu" :key="index">
                <navigator
                  class="order-item"
                  hover-class="none"
                  :url="item.url"
                >
                  <view class="pic">
                    <image :src="item.img" ></image>
                   
                  </view>
                  <view class="txt">{{ item.title }}</view>
                </navigator>
              </block>
            </view>
          </view>
		  </view>
		  
		  
		  <!--       我的资产   -->
		  <view class="order-wrapper order-wrapper-property">
		    <view class="order-hd flex">
		      <view class="left">
				  我的资产
				  </view>
		      <navigator
		        class="right flex"
		        hover-class="none"
		        url="/pages/subpackage/order/index?status=0"
		        open-type="navigate"
		      >
		        全部
		        <text class="iconfont icon-xiangyou"></text>
		      </navigator>
		    </view>
		    <view class="order-bd order-bd-propertyMenu">
		      <block v-for="(item, index) in propertyMenu" :key="index">
		        <navigator
		          class="order-item order-bd-propertyMenu-item"
		          hover-class="none"
		          :url="item.url"
		        >
		          <view class="pic">
		           
		            <text class="order-status-num" >{{
		              item.num
		            }}</text>
		          </view>
		          <view class="txt">{{ item.title }}</view>
		        </navigator>
		      </block>
		    </view>
		  </view>
		  
		  <!--       我的功能   -->
		  <view class="function-wrapper-k">
		  	
		  
		  <view class="function-wrapper">
		    <view class="order-bd">
		      <block v-for="(item, index) in functionMenu" :key="index">
		        <navigator
		          class="order-item"
		          hover-class="none"
		          :url="item.url"
		        >
		          <view class="pic">
		            <image :src="item.img" ></image>
		           
		          </view>
		          <view class="txt">{{ item.title }}</view>
		        </navigator>
		      </block>
		    </view>
		  </view>
		  </view>
		  
		  
          <!--     轮播 -->
          <!-- 轮播 -->
          <view class="slider-wrapper" >
            <swiper
              indicator-dots="true"
              :autoplay="autoplay"
              :circular="circular"
              :indicator-dots="dotsToggle"
              :interval="interval"
              :duration="duration"
              indicator-color="rgba(255,255,255,0.6)"
              indicator-active-color="#fff"
            >
              <block>
				  <!-- @click="navito(item.url)" -->
                <swiper-item class="borRadius14">
                  <image
                    src="/static/user/hd.png"
                    class="slide-image"
                    
                  ></image>
                </swiper-item>
              </block>
            </swiper>
          </view>
          <!--    常用功能  -->
         
        </view>
        <AuthorizationPopup ref="authRef"></AuthorizationPopup>
      </view>
    </ls-skeleton>
	
	
	
	<u-tabbar
		:value="tabbarvalue"
		@change="name => tabbarvalue = name"
		:fixed="true"
		:placeholder="true"
		:safeAreaInsetBottom="true"
		activeColor="#EFE281"
		inactiveColor="#FFFFFF"
		
	>
	<view class="cat-img">
		<image src="/static/images/cat.png" ></image>
	</view>
	<view class="dog-img">
		<image src="/static/images/dog.png" ></image>
	</view>
		<u-tabbar-item text="首页" icon="home" @click="tabbarselect"></u-tabbar-item>
		<u-tabbar-item text="门店" icon="photo" @click="tabbarselect"></u-tabbar-item>
		<u-tabbar-item text="" @click="tabbarselect">
			<view class="select" slot="active-icon">
				<image
							class="u-page__item__slot-icon"
							src="/static/images/index.png"
						></image>
			</view>
			<view class="noselect" slot="inactive-icon">
				<image
							class="u-page__item__slot-icon"
							src="/static/images/index.png"
						></image>
			</view>
			
		</u-tabbar-item>
		<u-tabbar-item text="活动" icon="play-right" @click="tabbarselect"></u-tabbar-item>
		<u-tabbar-item text="我的" icon="account" @click="tabbarselect"></u-tabbar-item>
	</u-tabbar>
  </view>
</template>

<script>
import AuthorizationPopup from "@/components/AuthorizationPopup";

import { personCenter } from "@/api/user/index";
import { BASE_URL_IMAHE } from "../../../utils/https";
export default {
  name: "index.vue",
  components: {
    AuthorizationPopup,
  },
  data() {
    return {
		imgUrl:BASE_URL_IMAHE,
		tabbarvalue: 4,
      avatarUrl:
        "https://img2.baidu.com/it/u=1963855021,587266605&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1687453200&t=6e9885ba4fa8e19869d873eab8222cc1",
      loading: true,
      skeleton: [
        "line-sm*3",
        40,
        "card",
        "circlesm*2",
        "line",
        "card-lg",
        40,
        "news",
        "line-sm*3+square",
      ],
      
      // imgUrls: [],
      //是否自动切换
      autoplay: true,
      //是否采用衔接滑动，即播放到末尾后重新回到开头
      circular: true,
      //是否显示面板指示点
      dotsToggle: false,
      //自动切换时间间隔
      interval: 3000,
      //滑动动画时长
      duration: 500,
      uid: "",
      orderMenu: [
        {
          img: "/static/user/orde_1.jpg",
          title: "商城订单",
          url: "/pages/subpackage/order/index?status=0&type=1",
          num: 0,
        },
        {
          img: "/static/user/orde_2.jpg",
          title: "权益卡订单",
          // url: "/pages/subpackage/order/index?status=0&type=2",
		    url:"",
          num: 0,
        },
        {
          img: "/static/user/orde_3.jpg",
          title: "门店订单",
          url: "/pages/subpackage/order/index?status=0&type=0",
          num: 0,
        },
        // {
        //   img: "/static/user/orde_4.jpg",
        //   title: "全部订单",
        //   // url: "/pages/subpackage/order/index?status=0&type=4",
        //   num: 0,
        // },
      ],
	  
	  propertyMenu: [
	    {
	      title: "积分",
	      url: "",
	      num: 0,
	    },
	    {
	      title: "储值",
	      url: "",
	      num: 0,
	    },
	    {
	      title: "优惠券",
	      url: "",
	      num: 0,
	    }
	   
	  ],
	  
	  functionMenu: [
	    {
	      img: "/static/user/wd_1.jpg",
	      title: "我的活动",
	      url: "",
	      num: 0,
	    },
	    {
	      img: "/static/user/wd_2.jpg",
	      title: "我的公益",
	      url: "",
	      num: 0,
	    },
	    {
	      img: "/static/user/wd_3.jpg",
	      title: "我的预约",
	      url: "",
	      num: 0,
	    },
	    {
	      img: "/static/user/wd_4.jpg",
	      title: "我的问诊",
	      url: "",
	      num: 0,
	    },
		{
		  img: "/static/user/wd_5.jpg",
		  title: "家政服务",
		  url: "",
		  num: 0,
		},
	  ],
     
      MyUserInfo: "",
      userInfoServer: "",
      token: "",
      //足迹
      footprintTotal: "",
	  mobile:'',
	  islogin:true,
	  userinfo:{},
	  petIdcardList:[],
    };
  },
  watch: {},
  //下拉刷新
  onPullDownRefresh() {
    uni.showLoading({
      title: "正在刷新...",
    });
    // this.userList();
    //足迹
    // this.footprint();
    // //收藏
    // this.collect();
  },
  onLoad() {
    this.bannerList();

  },
  onShow() {
	  uni.hideTabBar()
	  this.tabbarvalue=4
	  if(!uni.getStorageSync("userId")){
		  uni.showModal({
		    title: "温馨提示",
		    content: "此时此刻需要您登录喔~",
		    // showCancel: false,
		    confirmText: "去登录",
		    cancelText: "再逛会",
		    success: (res) => {
		      if (res.confirm) {
		        uni.navigateTo({
		          url: "/pages/empower/mp-weixin",
		        });
		      }
		      if (res.cancel && getCurrentPages().length > 1) {
		        uni.navigateBack();
		      }
		      
		    },
		  });
	  }
	 
	  if(uni.getStorageSync("userId")){
		  this.islogin=true
	  }else{
		  this.islogin=false
	  }
	  
  this.getpersonCenter()
  
	
  },
  methods: {
	  goaddpetfun(index,item){
		  if(item){
			  uni.navigateTo({
			    url: `/pages/subpackage/pet/index?type=${index}&petIdcardId=${item.id}`,
			  });
		  }else{
			uni.navigateTo({
			  url: `/pages/subpackage/pet/index?type=${index}`,
			});  
		  }
		 
	  },
	 async getpersonCenter(){
		  let res=await personCenter({userId:uni.getStorageSync("userId")})
		  console.log(res)
		  if(res.result==0){
			  this.userinfo=res.user
			  this.petIdcardList=res.petIdcardList
			  this.propertyMenu[0].num=res.user.userPoint
			  this.propertyMenu[1].num=res.user.userBalance
			  if(res.user.userMobile){
				   uni.setStorageSync("userMobile",res.user.userMobile)
			  }else{
				  if(!uni.getStorageSync("userMobile")){
				  		  uni.showModal({
				  		    title: "温馨提示",
				  		    content: "此时此刻需要您授权手机喔~",
				  		    // showCancel: false,
				  		    confirmText: "授权手机",
				  		    cancelText: "再逛会",
				  		    success: (res) => {
				  		      if (res.confirm) {
				  		        uni.navigateTo({
				  		          url: "/pages/empower/newpw",
				  		        });
				  		      }
				  		      if (res.cancel && getCurrentPages().length > 1) {
				  		        uni.navigateBack();
				  		      }
				  		      
				  		    },
				  		  });
				  		  
				  }
			  }
			 
		  }
		  
	  },
	  outlogin(){
		uni.removeStorageSync("userId")  
		uni.removeStorageSync("mobile")  
	  },
    moduleFn(item) {
      console.log(item, "item");
      if (item.text === "足迹") {
        uni.navigateTo({
          url: "/pages/subpackage/my_footprint/index",
        });
      } else if (item.text === "购物车") {
        uni.navigateTo({
          url: "/pages/subpackage/collect/index",
        });
      } else if (item.text === "佣金") {
        uni.navigateTo({
          url: "/pages/subpackage/commission/index",
        });
      }
    },

    httpUrlFn(item) {
      return BASE_URL_IMAHE + item;
    },

    //banner图 列表
    async bannerList() {
		
		 setTimeout(()=>{
			  this.loading = false;
		 },500)
		 
		 // return
   //    const res = await bannerList(2);
   //    if (res.code === 0) {
   //      this.loading = false;
   //      this.imgUrls = res.data;
   //    }
    },

    async footprint() {
      const res = await selCount();
      console.log(res, "足迹");
      if (res.code === 0) {
        this.headerNumber[2].num = res.data || 0;
      }
    },

    async collect() {
		return
      const res = await selCountUserCollect();
      console.log(res, "收藏");
      if (res.code === 0) {
        this.headerNumber[0].num = res.data || 0;
      }
    },

    //更新用户等级数据
    async userList() {
      if (uni.getStorageSync("token")) {
        const res = await getUserByIdApi();
        if (res.code === 0) {
          this.userInfoServer = res.data;
          uni.setStorageSync("userInfoServer", res.data);
          //关闭加载动画
          uni.stopPullDownRefresh();
          uni.hideLoading();
        }
      } else {
        //关闭加载动画
        uni.stopPullDownRefresh();
        uni.hideLoading();
        //第一次进入弹窗
        // this.$refs.authRef.showToggle();
      }
    },

    //跳转个人资料
    head_login() {
      if (!uni.getStorageSync("userId")) {
        //第一次进入弹窗
        // this.$refs.authRef.showToggle();
        uni.navigateTo({
          url: "/pages/empower/mp-weixin",
        });
        return;
      }
      // uni.navigateTo({
      //   url: `/pages/subpackage/personalData/index`,
      // });
    },
    navito(e) {
		console.log(e)
		// chiak去掉
		return
      window.location.href = "https://" + e;
    },
    functionWrapper(item) {
      console.log(item, "item");
      // if (item.text === "消息中心") {
      //   return;
      // }
      uni.navigateTo({
        url: item.url,
      });
    },
	//底部导航栏切换
	tabbarselect(e){
		
		switch (this.tabbarvalue){
			case 0:
			uni.switchTab({
				url:"/pages/index/index"
			})
				break;
			case 1:
			uni.switchTab({
				url:"/pages/goods_cate/goods_cate"
			})
				break;
			case 2:
			uni.navigateTo({
				url:"/pages/subpackage/viewwbehtml/index"
			})
				break;
			case 3:
			uni.switchTab({
				url:"/pages/share/share"
			})
				break;
			case 4:
			uni.switchTab({
				url:"/pages/user/index"
			})
				break;
			default:
				break;
		}
		
	},
  },
};
</script>

<style scoped lang="scss">
.user_ {
  .header_wrapper {
    position: relative;
	width: 750rpx;
	height: 563rpx;
	background: linear-gradient(360deg, rgba(255,255,255,0.1) 3%, rgba(243,182,168,0.1) 16%, #EB5F3F 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
    > .head_title{
		font-size: 32rpx;
		font-weight: bolder;
		text-align: center;
		padding-top: 111rpx;
	}
    > .header_info_ {
      position: absolute;
      top: 197rpx;
      //left: rpx(16);
      left: 0;
      right: 0;
      bottom: 0;
      > .header_top_ {
        display: flex;
        align-items: center;
        margin-left: rpx(16);
        > .img_ {
          margin-right: rpx(8);
          border-radius: 50%;
          width: rpx(43);
          height: rpx(43);
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #ffffff;
          > image {
            width: rpx(43);
            height: rpx(43);
            border-radius: 50%;
            vertical-align: middle;
          }
        }
        > .header_name {
          display: flex;
          flex-direction: column;
          margin-top: rpx(2);
          > .name_ {
            font-size: rpx(15);
            font-weight: bold;
            color: #ffffff;
            display: flex;
            align-items: center;
            > .nickname_ {
              font-size: rpx(15);
              font-weight: bold;
              color: #353535;
              margin-right: rpx(14);
            }
            > .grade_ {
              background: #f1dcbb;
              border-radius: rpx(9);
              display: flex;
              align-items: center;
              padding: rpx(4) rpx(6) rpx(4) rpx(6);
			  color: #6a6a6a;
              > image {
                margin-right: rpx(2);
                width: rpx(29);
                height: rpx(18);
                vertical-align: middle;
                margin-left: rpx(-8);
              }
              > text {
                font-size: rpx(11);
                font-weight: 400;
                color: #353535;
              }
            }
          }
          > .grade_wrapper {
            display: flex;
            margin-top: rpx(4);
            > .id_ {
              font-size: rpx(11);
              font-weight: 400;
              color: #353535;
            }
          }
        }
      }
      > .header_number_ {
        margin-top: rpx(32);
        display: flex;
        padding: rpx(0) rpx(40);
        justify-content: space-between;
        > .item_ {
          display: flex;
          flex-direction: column;
          align-items: center;
          > view {
            margin-bottom: rpx(2);
            font-size: rpx(20);
            font-weight: 500;
            color: #ffffff;
            text-shadow: rpx(0) rpx(1) rpx(0) rgba(0, 0, 0, 0.25);
          }
          > text {
            font-size: rpx(13);
            font-weight: 400;
            color: #ffbfbf;
          }
        }
      }
    }
	
  }
}

.content_wrapper {
  width: rpx(375);
  min-height: rpx(544);
  // background: #ffffff;
  border-top-left-radius: rpx(15);
  border-top-right-radius: rpx(20);
  margin-top: -200rpx;
  position: relative;
  
}
.content-godinfo{
		
		width: 700rpx;
		min-height:200rpx;
		height: auto;
		background: linear-gradient(180deg, #FFFFFF 0%, #F7E4E8 100%);
		margin: 0 auto;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		position: relative;
		
		border-radius: 35rpx;
		.tj-godinfo{
			display: flex;
			justify-content: flex-start;
			margin-top: 33rpx;
			padding-left: 39rpx;
			align-items: center;
			font-size: 34rpx;
			color: #937678;
			text{
				margin-left: 20rpx;
			}
		}
		.content-godinfo-k{
			display: flex;
			justify-content: flex-start;
			margin-top: 33rpx;
			padding-left: 39rpx;
			.content-godinfo-k-img{
				width: 110rpx;
				height: 110rpx;
				image{
				width: 110rpx;
				height: 110rpx;	
				border-radius: 30rpx;
				}
			}
			.content-godinfo-k-title{
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				.dog-name{
					font-size: 30rpx;
					font-weight: bold;
					margin-top: 20rpx;
					color: #040000;
					display: flex;
					align-items: center;
					
					image{
						width: 32rpx;
						height: 32rpx;
						margin-left: 20rpx;
					}
				}
				.dog-lxorold{
					
					font-size: 30rpx;
					margin-top: 10rpx;
					color: #7F8080;
					
				}
				
			}
		}
			
		.dog-leb{
			display: flex;
			align-items: center;
			margin-left: 43rpx;
			margin-top: 30rpx;
			font-size: 30rpx;
			image{
				width: 38rpx;
				height: 38rpx;
				margin-right: 10rpx;
			}
			text{
				color: #937678;
				font-weight: bold;
			}
			.dog-see{
				width: 116rpx;
				height: 53rpx;
				color: #ffffff;
				background-color: #EB5F3F;
				text-align: center;
				line-height: 53rpx;
				border-radius: 15rpx;
				margin-left: 20rpx;
			}
		}
		
		
	}
.order-wrapper-k{
	width: 684rpx;
	height: 148rpx;
	background: #FFFFFF;
	opacity: 1;
	margin: 0 auto;
	border-radius: 35rpx;
	margin-top: 22rpx;
}

.order-wrapper {
  padding: rpx(10) rpx(12);
  position: relative;
  z-index: 1;

  .order-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: rpx(16);

    .left {
      font-size: rpx(17);
      font-weight: bold;
	  margin-left: 20rpx;
      color: #353535;
    }

    .right {
      font-size: rpx(13);
      font-weight: 400;
      color: #b2b2b2;
      display: flex;
      align-items: center;

      .icon-xiangyou {
        margin-left: rpx(4);
        font-size: rpx(12);
      }
    }
  }

  .order-bd {
    display: flex;
    justify-content: space-between;
    padding: 0 rpx(10);

    .order-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .pic {
        position: relative;
        text-align: center;
        margin-bottom: rpx(6);
		margin-top: 20rpx;

        image {
          width: rpx(30);
          height: rpx(30);
          vertical-align: middle;
        }

        .order-status-num {
		  font-size: rpx(16);
		  font-weight: bolder;
          padding: 0 rpx(4);
        }
      }

      .txt {
        font-size: rpx(13);
        font-weight: bolder;
        color: #353535;
      }
    }
  }
  .order-bd-propertyMenu{
	  justify-content: flex-start;
	  .order-bd-propertyMenu-item{
		  width: 120rpx;
	  }
  }
}
.function-wrapper-k{
	width: 684rpx;
	height: 182rpx;
	background: #FFFFFF;
	opacity: 1;
	border-radius: 35rpx;
	margin: 20rpx auto 0rpx;
	.function-wrapper{
		position: relative;
		z-index: 1;
		padding: 15rpx 10rpx 0rpx;
		
		.order-bd {
		  display: flex;
		  justify-content: space-between;
		  padding: 0 rpx(10);
		
		  .order-item {
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    align-items: center;
		
		    .pic {
		      position: relative;
		      text-align: center;
		      margin-bottom: rpx(6);
				margin-top: 20rpx;
		
		      image {
		        width: rpx(30);
		        height: rpx(30);
		        vertical-align: middle;
		      }
		
		      .order-status-num {
				  font-size: rpx(16);
				  font-weight: bolder;
		        padding: 0 rpx(4);
		      }
		    }
		
		    .txt {
		      font-size: rpx(13);
		      font-weight: bolder;
		      color: #353535;
		    }
		  }
		}
	}
	
}
.order-wrapper-order{
	padding: rpx(0) rpx(12);
}
.order-wrapper-property{
	width: 684rpx;
	height: 239rpx;
	background: #FFFFFF;
	opacity: 1;
	border-radius: 35rpx;
	margin: 14rpx auto 0rpx;
}

.slider-wrapper {
  margin: rpx(12) rpx(12);
  height: rpx(72);
  border-radius: rpx(36);
  overflow: hidden;

  swiper,
  swiper-item {
    height: 100%;
  }

  image {
    width: 100%;
    height: 100%;
  }
}

.function_ {
  margin: rpx(28) rpx(0);
  > .title_ {
    font-size: rpx(17);
    font-weight: bold;
    color: #353535;
    margin-bottom: rpx(16);
    padding: rpx(0) rpx(12);
  }
  > .function_wrapper {
    display: flex;
    //padding: rpx(0) rpx(12);
    flex-wrap: wrap;
    > .item_ {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: rpx(24);
      > image {
        width: rpx(24);
        height: rpx(24);
        vertical-align: middle;
        margin-bottom: rpx(6);
      }
      > text {
        font-size: rpx(12);
        font-weight: 400;
        color: #353535;
      }
    }
  }
}
.outlogin{
	// color: #000;
	// background-color: sandybrown;
}

// 底部导航栏样式
.u-tab-bar{
	padding-top: 30rpx;
	// position: relative;
}
// 底部导航栏样式
.select{
	position: absolute;
	bottom: -30rpx;
	display: flex;
	justify-content: center;
}
.noselect{
	position: absolute;
	bottom: -30rpx;
	display: flex;
	justify-content: center;
}
.u-page__item__slot-icon{
	width: 156rpx;
	height: 156rpx;
	margin: 0 auto;
	// padding-bottom: 20rpx;
}
.cat-img{
	position: absolute;
	top: -50rpx;
	left: 116rpx;
	image{
		width: 89rpx;
		height: 92rpx;
	}
}
.dog-img{
	position: absolute;
	top: -53rpx;
	right: 112rpx;
	image{
		width: 80rpx;
		height: 106rpx;
	}
}
</style>
